<template>
    <view class="detailBox">
        <view class="mart-30">
            <view class="commit-title">基本信息</view>
            <view class="topContent readBox" v-if="thisData">
                <u-read-more ref="uReadMore" :showHeight="200" closeText="查看更多" :toggle="true">
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">钢丝绳编码</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ thisData.code }}</text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">钢丝绳名称</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ thisData.name }}</text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">规格型号</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ thisData.guiGe }}</text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">直径</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ thisData.diameter }}</text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">公称捻距</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ thisData.nianJu }}</text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">安全运行时长</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ thisData.dayNum }}天</text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">安装长度</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ thisData.installLengthNum }}</text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">绳子条数</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ thisData.cnt || "-" }}</text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">提升用途</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.hoisterUsageName || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">钢丝绳类型</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.wireropeTypeName || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">提升机类型</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.hoisterName || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">安装日期</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.installDate | ymd }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">主要负责人</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.linkUser || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">负责人电话</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.linkPhone || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">矿山</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.department_Name || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">备注</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.remark || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">供应商</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.supplierName || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">制造商</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.producerName || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">抗拉强度</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.mpaName || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">表面状态</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.surfaceStatusName || "-" }} </text>
                        </u-col>
                    </u-row>
                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">捻制类型</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name"> {{ thisData.twistingTypeName || "-" }} </text>
                        </u-col>
                    </u-row>
                </u-read-more>
            </view>
        </view>
        <view>
            <view class="commit-title">检测记录（最近一次）</view>
            <u-row gutter="0" class="mart-20">
                <u-col span="12">
                    <u-button type="warning" size="small" text="导出" @click="onExport"></u-button>
                </u-col>
            </u-row>
        </view>
        <view class="tabBox">
            <u-tabs :activeStyle="{ color: '#409EFF' }" :current="current" :list="tabList" @click="tabClick"></u-tabs>
            <view class="topContent scrollBox" v-show="current == 0">
                <u-row gutter="0" class="marb-20">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">检测类型</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ lastCheckWireropeModel.type | enums($enums.CheckType) }}</text>
                    </u-col>
                </u-row>
                <u-line class="marb-20"></u-line>
                <u-row gutter="0" class="marb-20">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">检测单位</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ lastCheckWireropeModel.checkUnit }}</text>
                    </u-col>
                </u-row>
                <u-line class="marb-20"></u-line>
                <u-row gutter="0" class="marb-20">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">检测人员</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ lastCheckWireropeModel.checkUserName }}</text>
                    </u-col>
                </u-row>
                <u-line class="marb-20"></u-line>
                <u-row gutter="0" class="marb-20">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">检测日期</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ lastCheckWireropeModel.checkDate | ymd }}</text>
                    </u-col>
                </u-row>
                <u-line class="marb-20"></u-line>
                <u-row gutter="0" class="marb-20">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">钢丝绳编码</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ thisData.code }}</text>
                    </u-col>
                </u-row>
                <u-line class="marb-20"></u-line>
                <u-row gutter="0" class="marb-20">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">在用绳名称</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ thisData.name }}</text>
                    </u-col>
                </u-row>
                <u-line class="marb-20"></u-line>
                <u-row gutter="0" class="marb-20">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">规格型号</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ thisData.guiGe }}</text>
                    </u-col>
                </u-row>
                <u-line class="marb-20"></u-line>
                <u-row gutter="0" class="marb-20">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">公称直径</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ thisData.diameter }}</text>
                    </u-col>
                </u-row>
                <u-line class="marb-20"></u-line>
                <u-row gutter="0" class="marb-20">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">制造单位</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ thisData.producerName }}</text>
                    </u-col>
                </u-row>
                <u-line class="marb-20"></u-line>
                <u-row gutter="0" class="marb-20">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">使用单位</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ thisData.department_Name }}</text>
                    </u-col>
                </u-row>
                <u-line class="marb-20"></u-line>
                <u-row gutter="0" class="marb-20">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">提升机用途</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ thisData.hoisterUsageName }}</text>
                    </u-col>
                </u-row>
                <u-line class="marb-20"></u-line>
                <u-row gutter="0" class="marb-20">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">钢丝绳类型</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ thisData.wireropeTypeName }}</text>
                    </u-col>
                </u-row>
                <u-line class="marb-20"></u-line>
                <u-row gutter="0" class="marb-20">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">安装日期</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ thisData.installDate | ymd }}</text>
                    </u-col>
                </u-row>
                <u-line class="marb-20"></u-line>
                <u-row gutter="0" class="marb-20">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">安装长度</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ thisData.installLengthNum }}</text>
                    </u-col>
                </u-row>
                <u-line class="marb-20"></u-line>
                <u-row gutter="0" class="marb-20">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">安全运行时长</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ thisData.dayNum }}天</text>
                    </u-col>
                </u-row>
                <u-line class="marb-20"></u-line>
                <u-row gutter="0" class="marb-20">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">上次维保日期</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ thisData.lastUsingWireropeKeepModel.doDate | ymd }}</text>
                    </u-col>
                </u-row>
                <u-line class="marb-20"></u-line>
                <u-row gutter="0" class="marb-20">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">上次检测日期</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ lastCheckWireropeModel.checkDate | ymd }}</text>
                    </u-col>
                </u-row>
                <u-line class="marb-20"></u-line>
                <u-row gutter="0" class="marb-20">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">下次检测日期</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ lastCheckWireropeModel.nextCheckDate | ymd }}</text>
                    </u-col>
                </u-row>

                <u-row gutter="0" class="marb-20">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">是否建议更换</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">
                            <u-radio-group v-model="lastCheckWireropeModel.isSuggestChange" disabled>
                                <u-radio :name="false" label="否"></u-radio>
                                <u-radio :name="true" label="是"></u-radio>
                            </u-radio-group>
                        </text>
                    </u-col>
                </u-row>
            </view>
            <view class="mart-30" v-show="current != 0">
                <u-row gutter="0" class="bg-white">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">绳名称</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ ropeData.name }}</text>
                    </u-col>
                </u-row>
                <u-line></u-line>
                <u-row gutter="0" class="bg-white marb-20">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">附件</text>
                    </u-col>
                    <u-col span="3">
                        <u-button type="primary" @click="file_AttrShow(ropeData.attr_FilesList)" size="small" text="查看"></u-button>
                    </u-col>
                </u-row>
                <view class="commit-title flexTitle marb-10">
                    <text>断丝</text>
                    <u-button type="primary" @click="onShowDataEntry(1)" size="small" text="查看数据"></u-button>
                </view>
                <u-row gutter="0" class="bg-white">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">捻距内断丝数</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ ropeData.dsCnt }}</text>
                    </u-col>
                </u-row>
                <u-line></u-line>
                <u-row gutter="0" class="bg-white">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">位置</text>
                    </u-col>
                    <u-col span="3">
                        <u-button type="primary" @click="onShowLookPosition()" size="small" text="查看"></u-button>
                    </u-col>
                </u-row>
                <u-line></u-line>
                <u-row gutter="0" class="bg-white">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">LA</text>
                    </u-col>
                    <u-col span="7">
                        <text class="label-name">{{ ropeData.dsLa }} %</text>
                    </u-col>
                    <u-col span="1">
                        <zb-tooltip :content="thisData.laRemark" placement="left">
                            <u-icon name="info-circle" v-if="thisData.laRemark"></u-icon>
                        </zb-tooltip>
                    </u-col>
                </u-row>
                <u-line></u-line>
                <u-row gutter="0" class="bg-white">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">捻距内新增断丝数</text>
                    </u-col>
                    <u-col span="3">{{ ropeData.dsCntAdd }}</u-col>
                </u-row>
                <u-line></u-line>
                <u-row gutter="0" class="bg-white">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">新增断丝总数</text>
                    </u-col>
                    <u-col span="3">{{ ropeData.allCntAdd }}</u-col>
                </u-row>
                <u-line></u-line>

                <view class="commit-title flexTitle mart-20 marb-10">
                    <text>直径</text>
                    <u-button type="primary" @click="onShowDataEntry(2)" size="small" text="查看数据"></u-button>
                </view>
                <u-row gutter="0" class="bg-white">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">位置</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ ropeData.zjPosition }} m</text>
                    </u-col>
                </u-row>
                <u-line></u-line>
                <u-row gutter="0" class="bg-white">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">DIA</text>
                    </u-col>
                    <u-col span="7">
                        <text class="label-name">{{ ropeData.zjDia }} %</text>
                    </u-col>
                    <u-col span="1">
                        <zb-tooltip :content="thisData.diaRemark" placement="left">
                            <u-icon name="info-circle" v-if="thisData.diaRemark"></u-icon>
                        </zb-tooltip>
                    </u-col>
                </u-row>
                <view class="commit-title mart-10 marb-10">金属截面丢失</view>
                <u-row gutter="0" class="bg-white">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">位置</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ ropeData.jsjmPosition }} m</text>
                    </u-col>
                </u-row>
                <u-line></u-line>
                <u-row gutter="0" class="bg-white">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">LMA</text>
                    </u-col>
                    <u-col span="7">
                        <text class="label-name">{{ ropeData.jsjmLma }} %</text>
                    </u-col>
                    <u-col span="1">
                        <zb-tooltip :content="thisData.lmaRemark" placement="left">
                            <u-icon name="info-circle" v-if="thisData.lmaRemark"></u-icon>
                        </zb-tooltip>
                    </u-col>
                </u-row>
                <view class="commit-title mart-10 marb-10">捻距变化</view>
                <u-row gutter="0" class="bg-white">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">捻距</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ ropeData.nianJu }} mm</text>
                    </u-col>
                </u-row>
                <u-line></u-line>
                <u-row gutter="0" class="bg-white">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">LL</text>
                    </u-col>
                    <u-col span="7">
                        <text class="label-name">{{ ropeData.nianJuChange }} %</text>
                    </u-col>
                    <u-col span="1">
                        <zb-tooltip :content="thisData.nianJuRemark" placement="left">
                            <u-icon name="info-circle" v-if="thisData.nianJuRemark"></u-icon>
                        </zb-tooltip>
                    </u-col>
                </u-row>
                <view class="commit-title mart-10 marb-10">其他</view>
                <u-row gutter="0" class="bg-white">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">腐蚀情况</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ ropeData.othFuShi }}</text>
                    </u-col>
                </u-row>
                <u-line></u-line>
                <u-row gutter="0" class="bg-white">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">磨损情况</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ ropeData.othMoSun }}</text>
                    </u-col>
                </u-row>
                <u-line></u-line>
                <u-row gutter="0" class="bg-white">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">其他损伤</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ ropeData.othQiTa }}</text>
                    </u-col>
                </u-row>
                <u-line></u-line>
                <u-row gutter="0" class="bg-white">
                    <u-col span="4" textAlign="center">
                        <text class="label-name">综合判定</text>
                    </u-col>
                    <u-col span="6">
                        <text class="label-name">{{ ropeData.othZongHe }}</text>
                    </u-col>
                </u-row>
            </view>
        </view>
        <ImgShow ref="ImgShowRef"></ImgShow>
    </view>
</template>

<script>
export default {
    data() {
        return {
            thisData: {
                lastUsingWireropeKeepModel: {},
            },
            tabList: [
                {
                    name: "基本信息",
                },
            ],
            current: "0",
            lastCheckWireropeModel: {},
            ropeData: {},
            fileExts: ["doc", "xls", "ppt", "pdf", "docx", "xlsx", "pptx"],
        };
    },
    //生命周期-加载
    onLoad: function (option) {
        let that = this;
        // #ifdef APP-NVUE
        const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
        // #endif

        // #ifndef APP-NVUE
        const eventChannel = this.getOpenerEventChannel();
        // #endif
        eventChannel.on("stateDetail", function (data) {
            that.init(data.data);
        });
    },
    methods: {
        onShowDataEntry(type) {
            let data = this.ropeData;
            let url = "/pages/stateMonitoring/ropeSite";
            const that = this;
            uni.navigateTo({
                url: url,
                success: function (res) {
                    res.eventChannel.emit("ropeData", {
                        data: {
                            name: data.name,
                            data: type == that.$enums.DataEntry_Type.断丝 ? data.dataEntryList : data.lookPositionList,
                            type: type,
                            isLook: true,
                        },
                    });
                },
            });
        },
        onShowLookPosition() {
            let data = this.ropeData;
            let url = "/pages/stateMonitoring/ropeSite2";
            uni.navigateTo({
                url: url,
                success: function (res) {
                    res.eventChannel.emit("ropeData", {
                        data: {
                            name: data.name,
                            data: data.checkWireropeDetailPositionModels,
                            isLook: true,
                        },
                    });
                },
            });
        },
        init(row) {
            this.$app.CallApi(this.$app.api.UsingWirerope.GetStatusMonitorByID(row.autoID), {
                success: (res) => {
                    this.thisData = res;
                    //计算安全运行时长
                    let dayNum = this.$gx.DateDiff("date", res.installDate, this.$gx.GetDateTime());
                    res.dayNum = dayNum;
                    res.lastUsingWireropeKeepModel = res.lastUsingWireropeKeepModel || {};
                    res.lastCheckWireropeModel = res.lastCheckWireropeModel || { checkWireropeDetailModels: [] };
                    let tabList = this.tabList;
                    //循环绳子过滤类型
                    for (var i = 0; i < res.lastCheckWireropeModel.checkWireropeDetailModels.length; i++) {
                        let item = res.lastCheckWireropeModel.checkWireropeDetailModels[i];
                        tabList.push({
                            name: item.sortNo + "号绳",
                        });
                        item.dataEntryList = item.checkWireropeDetailDataModels.filter((x) => x.type == this.$enums.DataEntry_Type.断丝);
                        item.lookPositionList = item.checkWireropeDetailDataModels.filter((x) => x.type == this.$enums.DataEntry_Type.直径);
                    }
                    this.tabList = tabList;
                    this.lastCheckWireropeModel = res.lastCheckWireropeModel;
                },
            });
        },
        tabClick(item) {
            let index = item.index;
            if (index != 0) {
                this.ropeData = this.lastCheckWireropeModel.checkWireropeDetailModels[index - 1];
            }
            this.current = index;
        },
        onExport() {
            this.$app.CallApi(this.$app.api.UsingWirerope.ExportLastCheckExcel(this.thisData.usingWireropeID), {
                success: (res) => {
                    let url = this.$config.ApiUrl + res;
                    // #ifdef APP-PLUS
                    uni.showLoading({ title: "开始下载并保存，请稍后！" });

                    uni.downloadFile({
                        url: url,
                        success: (downRes) => {
                            if (downRes.statusCode === 200) {
                                uni.saveFile({
                                    tempFilePath: downRes.tempFilePath,
                                    success: (saveRes) => {
                                        let fileInfo = this.$gx.GetUrlFileName(saveRes.savedFilePath);

                                        let findIndex = this.fileExts.findIndex((x) => {
                                            return x === fileInfo.extName.toLowerCase();
                                        });

                                        if (findIndex != -1) {
                                            this.$app.Tips({ title: "正在打开文件...", icon: "none" });
                                            uni.openDocument({
                                                filePath: saveRes.savedFilePath,
                                                success: (res) => {},
                                                fail() {
                                                    this.$app.Tips({ title: "打开失败！" });
                                                },
                                            });
                                        } else {
                                            this.$app.Tips({ title: "保存成功！", icon: "none" });
                                        }
                                    },
                                    fail() {
                                        this.$app.Tips({ title: "保存失败！" });
                                    },
                                });
                            }
                        },
                        fail() {
                            this.$app.Tips({ title: "保存失败！" });
                        },
                        complete() {
                            uni.hideLoading();
                        },
                    });
                    // #endif
                },
            });
        },
        //查看
        file_AttrShow(list) {
            if (!list || list.length == 0) {
                this.$u.toast("暂无可查看内容~");
                return;
            }
            this.$nextTick(() => {
                this.$refs.ImgShowRef.init(list);
            });
        },
    },
};
</script>

<style scoped>
uni-page-body {
    height: 100%;
}

.detailBox {
    padding: 0 30rpx;
    /* height: 100%; */
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overflow-x: scroll;
    overflow-y: scroll;
    padding-bottom: 30rpx;
}

.scrollBox {
    overflow-x: auto;
    padding-bottom: 0px;
}

.tabBox {
    height: 45%;
}

.bg-white {
    background-color: white;
    box-sizing: border-box;
    padding: 20rpx 0;
}

.flexTitle {
    display: flex;
    align-items: center;
}

.flexTitle uni-button {
    width: 150rpx;
    margin: 0;
    margin-left: 30rpx;
}
</style>
